<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>Моя группа</title>
    <div th:replace="~{fragments/headTag :: headTag}"></div>
</head>
<body>
<!--@thymesVar id="user" type="ru.tbcarus.spendingsb.model.User"-->
<!--@thymesVar id="u" type="ru.tbcarus.spendingsb.model.User"-->
<!--@thymesVar id="f" type="ru.tbcarus.spendingsb.model.Friend"-->
<!--@thymesVar id="friends" type="java.util.List"-->
<!--@thymesVar id="friendsMapId" type="java.util.Map"-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
        crossorigin="anonymous"></script>
<script th:src="@{/js/util.js}"></script>
<script th:src="@{/js/group.js}"></script>
<nav th:replace="~{fragments/bodyHeader :: bodyHeader}"></nav>
<div class="jumbotron pt-4 p-5 bg-light">
    <div class="container">
        <h3 class="text-center">Моя группа</h3>
        <div class="">
            <button class="btn btn-del mb-2" th:onclick="|window.location.href = '@{/group/delete}'|">
                Удалиться из группы
            </button>
        </div>
        <table class="table table-striped" id="datatable">
            <thead>
            <tr>
                <th>Имя</th>
                <th>Цвет</th>
                <th>Почта</th>
                <th th:if="${user.isSuperUser()}">
                    Дата
                    <input type="button" value="Set EQ" class="btn btn-top"
                           th:onclick="|window.location.href = '@{/group/level-dates}'|"/>
                </th>
                <th>Role</th>
                <th th:if="${user.isSuperUser()}">Права</th>
                <th th:if="${user.isSuperUser()}">Удалить</th>
            </tr>
            </thead>
            <tbody>
<!--            <tr th:each="entry : ${friendsMap}" th:with="u=${entry.getKey()}, f=${entry.getValue()}">-->
            <tr th:each="u : ${friends}" th:with="f=${friendsMapId.get(u.id)}">
                <td th:text="${u.name}"></td>
                <td>
                    <input type="color" class="form-control form-control-color"
                           th:id="f-color-+${f.id}" th:name="head"
                           th:value="${f.color}"
                           style="background-color: #9fcfca;"
                           th:onchange="changeColor([[${f.id}]])"/>
                </td>
                <td th:text="${u.email}"></td>
                <td th:if="${user.isSuperUser()}">
                    <span th:text="${u.getStartPeriodDate()}">D_A_T_E</span>
                </td>
                <td>
                    <span th:if="${u.isSuperUser()}">Super User</span>
                </td>
                <td th:if="${user.isSuperUser()}">
                    <a th:unless="${u.isSuperUser()}" th:href="@{/group/{id}/addSU(id=${u.id()})}">Сделать SU</a>
                    <a th:if="${u.isSuperUser()}" th:href="@{/group/{id}/removeSU(id=${u.id()})}">Убрать SU</a>
                </td>
                <td th:if="${user.isSuperUser()}"><a th:href="@{/group/{id}/delete(id=${u.id()})}">Удалить</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--    copyright-->
<br>
<div th:replace="~{fragments/footer :: copy}"></div>

</body>
</html>